<template>
  <div class="comprehensive-tags-page">
    <main>
      <div class="header">
        <p class="title">标签分组</p>
        <div class="search-container">
          <div class="btns">
            <el-button icon="el-icon-upload2" type="primary" @click="handleImport">导入</el-button>
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <el-table
          class="table-container"
          :data="tableData"
          v-loading="tableLoading"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          element-loading-custom-class="custom-load"
          row-key="id">
          <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
          <el-table-column label="分组名称" prop="msgName" align="center"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <el-button
                type="primary"
                size="mini"
                @click="preview(options.previewImg)">
                新增子级
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="download(options.downloadUrl)">
                编辑
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="download(options.downloadUrl)">
                删除
              </el-button>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'add',
      visible: false,
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 10,
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {},
  methods: {
    async getTableData() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId
      };
      const { success, data: {
        data
      }} = await this.$Model.getCommonList(params);
      if (success && data) {
        const { list, total } = data;
        this.tableData = list || [];
        this.total = total || 0;
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    handleImport() {

    },
    handleAdd() {

    }
  },
};
</script>

<style lang="scss" scoped>
  .comprehensive-tags-page {

  }
</style>
